<template>
	<div>
		<el-form :inline="true">
			<el-form-item label="日期类型" prop="type" label-width="70px">
				<el-select v-model="type" placeholder="请选择" style="width: 95px;" @change="changStarttype" :disabled="showSelect">
					<el-option v-for="item in typeData" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="开始日期" prop="startdate" label-width="70px">
				<el-date-picker v-model="startdate" type="date" value-format="yyyy-MM-dd" :picker-options="pickerOptions2" placeholder="选择日期" @change="changeStart" style="width: 135px;"> </el-date-picker>
			</el-form-item>
			<el-form-item label="结束日期" prop="enddate" label-width="70px">
				<el-date-picker v-model="enddate" type="date" value-format="yyyy-MM-dd" :picker-options="pickerOptions2" placeholder="选择日期" @change="changeEnd" style="width: 135px;"> </el-date-picker>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		props:{
			selectType:String,
			showSelect:{
				type:Boolean,
				default:false
			},
			isDisabled:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				startdate:'',
				enddate: '',
				type: '',
				typeData: [{
					value: '1',
					label: '日',
					disabled: false
				}, {
					value: '2',
					label: '周'
				}, {
					value: '3',
					label: '月'
				}, {
					value: '4',
					label: '年'
				}, {
					value: '5',
					label: '自定义',
					disabled: false
				}],
				pickerOptions2: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					}
				},
				oneDayLong:24 * 60 * 60 * 1000,
				
			}
		},
		components: {
			//注册组件
		},
		mounted: function() {
			//生命周期
		},
		computed: {
			//计算属性
		},
		methods: { //函
			
			changStarttype() {
				if(this.type=='5')
				{
					return;
				}
				let date = new Date();
				this.startdate = (date.getFullYear() + '-' + ((date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)) + '-' + ((date.getDate()) < 10 ? '0' + (date.getDate()) : (date.getDate()))).toString();
				 
				switch (this.type)
				{
					 
					case '1':
						this.enddate = this.startdate;
						break;
					case '2':
						this.weekDate(this.startdate);
						break;
					case '3':
						this.monthDate(this.startdate);
						break;
					case '4':
						this.yearDate(this.startdate);
						break;
				}	
			},
			changeStart() {
				switch (this.type)
				{
					case '5':
						break;
					case '1':
						this.enddate = this.startdate;
						break;
					case '2':
						this.weekDate(this.startdate);
						break;
					case '3':
						this.monthDate(this.startdate);
						break;
					case '4':
						this.yearDate(this.startdate);
						break;
				}
			},
			changeEnd() {
				switch (this.type)
				{
					case '5':
						break;
					case '1':
						this.startdate = this.enddate;
						break;
					case '2':
						this.weekDate(this.enddate);
						break;
					case '3':
						this.monthDate(this.enddate);
						break;
					case '4':
						this.yearDate(this.enddate);
						break;
				}
			},
			weekDate:function(val){
				let now = new Date(val); 
				let nowTime = now.getTime(); 
				let day = now.getDay();
				if(day ==0){
					day = 7;
				}
				let MondayTime = nowTime - (day) * this.oneDayLong ; 
				let SundayTime =  nowTime + (6 - day) * this.oneDayLong; 
				let start = new Date(MondayTime);
				this.startdate = (start.getFullYear() + '-' + ((start.getMonth() + 1) < 10 ? '0' + (start.getMonth() + 1) : (start.getMonth() + 1)) + '-' + ((start.getDate() + 1) < 10 ? '0' + (start.getDate() + 1) : (start.getDate() + 1))).toString();
				let end = new Date(SundayTime);
				this.enddate = (end.getFullYear() + '-' + ((end.getMonth() + 1) < 10 ? '0' + (end.getMonth() + 1) : (end.getMonth() + 1)) + '-' + ((end.getDate() + 1) < 10 ? '0' + (end.getDate() + 1) : (end.getDate() + 1))).toString();
				let date = new Date();
				let startTime = new Date(this.enddate).getTime();
				let endTime = new Date(date).getTime();
				if(startTime > endTime) {
					this.enddate = (date.getFullYear() + '-' + ((date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)) + '-' + ((date.getDate() + 1) < 10 ? '0' + (date.getDate()) : (date.getDate()))).toString();
				}
			},
			monthDate:function(val){
				this.startdate = val.substring(0, val.length - 3) + '-' + '01';
				let now = new Date(val);
				let month = now.getMonth();   
				let nextMonth = ++month;   
				let nextMonthFirstDay = new Date(now.getFullYear(), nextMonth, 1); 
				let end = new Date(nextMonthFirstDay - this.oneDayLong);
				this.enddate = (end.getFullYear() + '-' + ((end.getMonth() + 1) < 10 ? '0' + (end.getMonth() + 1) : (end.getMonth() + 1)) + '-' + ((end.getDate() + 1) < 10 ? '0' + (end.getDate()) : (end.getDate()))).toString();
				let date = new Date();
				let startTime = new Date(this.enddate).getTime();
				let endTime = new Date(date).getTime();
				if(startTime > endTime) {
					this.enddate = (date.getFullYear() + '-' + ((date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)) + '-' + ((date.getDate() + 1) < 10 ? '0' + (date.getDate()) : (date.getDate()))).toString();
				}
			},
			yearDate:function(val){
				this.startdate = val.substring(0, 4) + '-' + '01' + '-' + '01';
				this.enddate = val.substring(0, 4) + '-' + '12' + '-' + '31';
				let date = new Date();
				let startTime = new Date(this.enddate).getTime();
				let endTime = new Date(date).getTime();
				if(startTime > endTime) {
					this.enddate = (date.getFullYear() + '-' + ((date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)) + '-' + ((date.getDate() + 1) < 10 ? '0' + (date.getDate()) : (date.getDate()))).toString();
				}
			},
			
		},
		created: function() {
			this.type = this.selectType;
			this.changStarttype();
			this.typeData[0].disabled = this.isDisabled;
			this.typeData[4].disabled = this.isDisabled;
		},
		watch:{
			startdate:function(newval,oldval){
				this.$emit('timeSelect',[this.startdate,this.enddate,this.type]);
			},
			enddate:function(newval,oldval){
				this.$emit('timeSelect',[this.startdate,this.enddate,this.type]);
			},
			type:function(newval,oldval){
				this.$emit('timeSelect',[this.startdate,this.enddate,this.type]);
			}
		}
	}
</script>

<style>
	
</style>